<template>
	<view class="container">
		<!-- 地图部分 -->
		<map :latitude="latitude" :longitude="longitude" style="width: 100%; height: 65vh;" scale="15"
			:markers="markers" :circles="circles">
		</map>

		<!-- 内容部分 -->
		<view class="content">

			<navigator url="/pages/zhang/location/sos/sos">
				<view class="SOS">
					<text>SOS</text>
					<text>紧急救助</text>
				</view>
			</navigator>
			<!-- 地址 -->
			<view class="address">
				<text>{{address}}</text>
			</view>
			<!-- 按钮 -->
			<view class="button">
				<view @click="isShow = true;showShare = true">
					<text>发送位置</text>
				</view>
				<view @click="showLoc = true;isShow = true">
					<text>共享实时位置</text>
				</view>
			</view>
		</view>

		<!-- 弹出框 -->
		<view class="layout" v-show="isShow" @click="isShow = false; showShare = false; showLoc = false">
			<!-- 发送位置弹出框 -->
			<view class="share" @click.stop v-show="showShare">
				<view>
					<text>分享至</text>
				</view>
				<view id="icon">
					<view v-for="item in shareTo" :key="item.id">
						<view>
							<image :src="item.iconPath" mode="widthFix"></image>
						</view>
						<text>{{item.title}}</text>
					</view>
				</view>

				<view id="rectangle"></view>

				<view class="cancel" @click="isShow = false;showShare = false">
					取消
				</view>
			</view>

			<!-- 共享实时位置弹出框 -->
			<view class="locator" v-show="showLoc" @click.stop>
				<view class="locTitle">
					<text>共享实时位置</text>
					<text>共享时间内,监护人可随时查看您的位置</text>
				</view>

				<scroll-view scroll-y>
					<block v-for="item in shareTime" :key="item.id">
						<view @click="select(item)">
							<text>{{item.title}}</text>
							<icon v-show="item.isSelect" type="success_no_circle" size="26" color="#3774EC"></icon>
						</view>
					</block>
				</scroll-view>

				<view>
					<view class="btn" @click="showLoc = false;isShow = false">取消</view>
					<view class="btn" @click="showLoc = false;isShow = false">确定</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../../untils/zhang/qqmap-wx-jssdk.js'
	import app from '../../../App.vue'
	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				address: "请选择共享方式",
				isShow: false,
				showShare: false,
				showLoc: false,
				circles: [{
					latitude: 0,
					longitude: 0,
					radius: 300,
					strokeWidth: 3,
					color: "#159aff88",
					fillColor: "#b3cbff48",
					level: "abovelabels",
				}],
				markers: [{
						latitude: 0,
						longitude: 0,
						iconPath: "../../../static/zhang/marker1.png",
						width: 45,
						height: 45,
						callout: {
							display: "ALWAYS",
							content: " 我 ",
							padding: 5,
							color: "#fff",
							fontSize: 18,
							bgColor: "#3774EC",
							borderRadius: 5
						}
					},
					{
						latitude: 0,
						longitude: 0,
						iconPath: "../../../static/zhang/marker3.png",
						width: 35,
						height: 35,
						callout: {
							padding: 5,
							display: "ALWAYS",
							content: " 监护人 ",
							color: "#ffffff",
							fontSize: 18,
							bgColor: "#ffc61a",
							borderRadius: 5
						}
					}
				],
				shareTo: [{
						id: 1,
						iconPath: "../../../static/zhang/weixin.svg",
						title: "微信"
					},
					{
						id: 2,
						iconPath: "../../../static/zhang/guardian.svg",
						title: "监护人"
					}
				],
				shareTime: [{
						id: 1,
						title: "永久有效",
						isSelect: true
					},
					{
						id: 2,
						title: "24小时有效",
						isSelect: false
					},
					{
						id: 3,
						title: "12小时有效",
						isSelect: false
					},
					{
						id: 4,
						title: "2小时有效",
						isSelect: false
					},
					{
						id: 5,
						title: "30分钟有效",
						isSelect: false
					}
				],
			}
		},
		methods: {
			select(item) {
				this.shareTime.forEach(st => {
					st.id == item.id ? st.isSelect = true : st.isSelect = false;
				})
			},
			getMapAddress() {
				const tMap = new QQMapWX({
					key: '46OBZ-2A3LV-ZUQPR-UNWJY-W4CY6-A6BYC' //开发者密钥
				});
				//使用 uni.getLocation获取用户所在经纬度
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						console.log("获取经纬度成功");
						this.circles[0].latitude = res.latitude;
						this.circles[0].longitude = res.longitude;
						this.markers[0].latitude = res.latitude;
						this.markers[0].longitude = res.longitude;
						this.markers[1].latitude = res.latitude - 0.003;
						this.markers[1].longitude = res.longitude - 0.003;
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail: () => {
						console.log("获取经纬度失败");
					},
					complete: () => {
						// 使用腾讯sdk的reverseGeocoder方法 解析经纬度,获取详细文字地址
						tMap.reverseGeocoder({
							location: {
								latitude: this.latitude,
								longitude: this.longitude
							},
							success: res => {
								console.log("解析地址成功", res);
								console.log("当前地址：", res.result.address);
								this.address = res.result.address;
								//保存缓存
								uni.setStorage({
									key: 'local',
									data: res.result.address,
									success() {
										console.log("用户地址信息已缓存")
									}
								})
							},
							fail: function(res) {
								uni.showToast({
									title: '定位失败',
									duration: 2000,
									icon: "none"
								})
								console.log(res);
							},
							complete: function(res) { //无论成功失败都会执行

							}
						})
					}
				})
			},
			onLoad: function() {
				this.getMapAddress();
			},
		},
	}
</script>

<style scoped>
	.content {
		position: relative;
		box-sizing: border-box;
		padding: 50rpx 50rpx;
	}

	.SOS {
		background-color: #F75384;
		font-size: small;
		width: 150rpx;
		height: 150rpx;
		display: flex;
		border-radius: 100%;
		flex-flow: column wrap;
		text-align: center;
		justify-content: center;
		color: white;
		font-weight: bold;
		position: absolute;
		top: -75rpx;
		right: 30rpx;
	}

	.address {
		font-size: 0.7rem;
		color: #808080;
	}

	.button {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.button>view {
		border: 1px solid #007AFF;
		width: 250rpx;
		height: 75rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 75rpx;
	}

	.button>view:first-child {
		color: #007AFF;
	}

	.button>view:last-child {
		background-color: #007AFF;
		color: white;
	}

	.layout {
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 10;
		top: 85rpx;
		background-color: rgba(115, 115, 115, 0.7);
	}

	.share {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		width: 100vw;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		height: 315rpx;
		box-sizing: border-box;
		padding-top: 20rpx;
		overflow: hidden;
		

	}

	.share>view:first-child {
		font-size: 0.7rem;
		color: #808080;
		margin-left: 20rpx;
	}

	#icon {
		display: flex;
		flex-direction: row;
		padding: 10px;
	}

	#icon>view {
		width: 80rpx;
		text-align: center;
		margin: 0px 30rpx;
		font-size: 0.7rem;
	}

	#icon image {
		width: 50rpx;
	}

	#icon>view>view {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		background-color: #e8ebf1;
		margin-bottom: 20rpx;
	}

	#rectangle {
		width: 100vw;
		height: 10rpx;
		background-color: #e6e9f0;
	}

	.cancel {
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
	}

	.locator {
		position: fixed;
		top: calc(50vh - 250rpx);
		left: calc(50vw - 275rpx);
		width: 550rpx;
		height: 500rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.locTitle {
		display: flex;
		flex-flow: column;
		justify-content: center;
		height: 150rpx;
		text-align: center;
		color: white;
		background-image: linear-gradient(45deg, #406BDB, #46b5ff);
	}

	.locTitle text:last-child {
		font-size: 0.7rem;
	}

	scroll-view {
		height: 200rpx;
	}

	scroll-view view {
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 500rpx;
		display: flex;
		margin: 0px auto;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
		border-bottom: 1px solid rgba(223, 223, 223, 0.5);
	}

	/* 弹出框样式 */
	scroll-view+view {
		margin-top: 30rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.btn {
		width: 200rpx;
		height: 85rpx;
		text-align: center;
		line-height: 85rpx;
		border-radius: 15rpx;
	}

	.btn:first-child {
		border: 1px solid #007AFF;
		color: #406BDB;
	}

	.btn:last-child {
		color: #FFF;
		background-color: #007AFF;
	}
</style>
